<template>
  <div class="content">
    <div v-if="isLoading" class="loading">
      <van-skeleton v-for="v in 10" :key="'key' + v" title :row="2" />
    </div>
    <ul>
      <li v-for="i in list">
        <router-link
          :to="{
            name: 'detail',
            path: '/detail',
            params: {
              id: i.lanmu_id,
            },
          }"
        >
          <div class="contentbox">
            <div class="category">
              <h3 class="catename">
                {{ i.lanmu_title }}<i class="iconfont">&#xe694;</i>
              </h3>
              <span>{{ i.lanmu_num_display }}</span>
            </div>
            <div class="item">
              <div class="innerloop" v-for="t in i.lanmu_kepu.lanmu_qingdan">
                <div class="par">
                  <p class="article_title">{{ t.article_title }}</p>
                </div>
                <div class="imgbox">
                  <div class="tag_name">{{ t.tag_name }}</div>
                  <img :src="t.article_pic" alt="" width="100%" />
                </div>
              </div>
            </div>
            <div class="hot">
              <h3 class="hotitem">热销单品</h3>
              <div class="imgshow">
                <!-- <p class="top">top1</p> -->
                <div class="imgcon" v-for="tm in i.lanmu_rank.wiki_rank">
                  <img :src="tm.pro_pic" alt="" width="100%" />
                </div>
              </div>
            </div>
          </div>
        </router-link>
      </li>
      <router-view></router-view>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
import { Skeleton } from "vant";
import Vue from "vue";

Vue.use(Skeleton);

export default {
  components: {},
  props: ["index"],
  data() {
    return {
      list: [],
      isLoading: true,
      loading: false,
      finished: false,
    };
  },

  methods: {
    async loadData() {
      let { tab_id, page } = this;
      let result = await axios.get(`/wxapp/zdmapp/guide`, {
        params: {
          tab_id,
          page,
        },
      });
      //   console.log(result);
      this.list = result.data.data.list;
    },
    /* clickHandle(){
        // console.log(this.$route);
        this.$router.push({
          path:'/detail',
          query:{
            id:1
          }
        })
      } */
  },
  created() {
    this.page = 1;
    this.tab_id = this.index + 1;
  },
  async mounted() {
    await this.loadData();
    this.isLoading = false;
  },
};
</script>

<style lang='stylus' scoped>
@import '../../../assets/ellipsis.styl'
.content
  height 100%
  margin-top 0.15rem
  ul
    height 100%
    li
      background-color #f7f7f7
      margin-bottom 0.15rem
      padding 0.25rem 0.16rem 0.2rem 0.16rem
      .category
        height 100%
        display flex
        .catename
          font-size 0.16rem
          line-height 1
          flex 1
        span
          font-size 0.12rem
          color #979797
      .innerloop
        margin-top 0.25rem
        width 100%
        display flex
        .par
          width 1.8rem
          .article_title
            font-size 13px
            color #434343
            ellipsis(100%, 2)
        .imgbox
          width 1.13rem
          height 0.48rem
          overflow hidden
          position relative
          .tag_name
            font-size 10px
            color white
            padding 0.03rem 0.05rem
            background-color rgba(0, 0, 0, 0.5)
            text-align center
            position absolute
            top -3px
            left -4px
            transform scale(0.9)
      .hot
        margin-top 0.23rem
        display flex
        height 0.66rem
        line-height 0.66rem
        .hotitem
          flex 1
          font-size 15px
        .imgshow
          display flex
          .imgcon
            width 0.66rem
            height 0.66rem
            img
              flex 1
</style>